﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<title>壹果企画(北京)科技有限公司-运营管理系统</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
	<meta name="description" content="">
	<meta name="author" content="">
	<!-- STYLESHEETS --><!--[if lt IE 9]><script src="js/flot/excanvas.min.js"></script><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
	<link rel="stylesheet" type="text/css" href="../css/cloud-admin.css" >
	
	<link href="../font-awesome/css/font-awesome.min.css" rel="stylesheet">

	<!-- ANIMATE -->
	<link rel="stylesheet" type="text/css" href="../css/animatecss/animate.min.css" />
	
</head>
<style>
	.flex{
    -moz-display:flex;
    -webkit-display:-webkit-box;
    -webkit-display:flex;
    -o-display:flex;
    -ms-display:flex;
    display:-webkit-box;
    display:flex;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
}
.form-control.s{width:60%;border-radius:6px 0 0 6px;}
#getCodeBtn{width:40%;border-radius:0 6px 6px 0;background:#d9534f; text-align: center; color:#fff;padding-top:7px;}
#getCodeBtn:hover{text-decoration:none;}
.yg-login-hint{background:#000;opacity:0.6;filter:alpha(opacity=60);border-radius:2px;color:#fff;font-size:20px;padding:10px;text-align: center;position: fixed;left:50%;top:30%;width:260px;margin-left:-130px;z-index:100;}
#iphoneNum::-webkit-input-placeholder,#setCode::-webkit-input-placeholder{color:#dbdbdb!important;}
#iphoneNum::-moz-placeholder,#setCode::-moz-placeholder{color:#dbdbdb!important;}
#iphoneNum::-ms-input-placeholder,#setCode::-ms-input-placeholder{color:#dbdbdb!important;}

#setCode::-webkit-input-placeholder,#setCode::-webkit-input-placeholder{color:#dbdbdb!important;}
#setCode::-moz-placeholder,#setCode::-moz-placeholder{color:#dbdbdb!important;}
#setCode::-ms-input-placeholder,#setCode::-ms-input-placeholder{color:#dbdbdb!important;}
</style>
<body class="login">	
	<!-- PAGE -->
	<section id="page">
		
			<!-- LOGIN -->
			<section id="login" class="visible">
				<div class="container">
					<div class="row">
						<div class="col-md-4 col-md-offset-4">
							<div class="login-box-plain">
							<div style="margin-left:50px"><img src="../img/logo/logo2.jpg"></div>
								
								<div class="divide-40"></div>
								<form role="form">
								  <div class="form-group">									
									<i class="fa fa-user" style="margin-top:15px"></i>
									<input type="text" id="iphoneNum" class="form-control" maxlength="11" name="username" style="height: 40px" placeholder="请输入手机号/用户名" >
									<div class="text-danger" id="iphoneNumInfo" style="display:none"></div>
								  </div>
								  <div class="form-group"> 									
									<i class="fa fa-lock"></i>
									<div class="flex">
										<input type="password" id="setCode" class="form-control s" maxlength="10" name="password" placeholder="请输入验证码" >
										<a href="javascript:;" id="getCodeBtn" disabled="disabled">获取验证码</a>
									</div>
									<div class="text-danger" id="setCodeInfo" style="display:none"></div>
								  </div>								  
								  <div class="form-group">									
									<button type="button" class="btn btn-danger" >登录</button>
								  </div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</section>
			<!--/LOGIN -->		
	</section>
	<!--/PAGE -->
	<!-- JAVASCRIPTS -->
	<!-- Placed at the end of the document so the pages load faster -->
	<!-- JQUERY -->
	<script src="../js/jquery/jquery-2.0.3.min.js"></script>
	<!-- JQUERY UI-->
	<script src="../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
	<!-- BOOTSTRAP -->
	<script src="../bootstrap-dist/js/bootstrap.min.js"></script>
	<!-- UNIFORM -->
	<script type="text/javascript" src="../js/uniform/jquery.uniform.min.js"></script>
		<!-- COOKIE -->
	<script type="text/javascript" src="../js/jQuery-Cookie/jquery.cookie.min.js"></script>
	<!-- CUSTOM SCRIPT -->
	<script src="../js/script.js"></script>
	<script type="text/javascript">
		//控制注册按钮是否可用，默认ture，[true表示注册按钮可用，false表示不可用]
		var hasRegist=true,isMobile=true;
		$(function(){
			var Login={
				init:function(){
					$('#getCodeBtn').attr('disabled',true).css({color:'#d2d2d2'});
					$("#iphoneNum").keyup(function(){
						$('#iphoneNumInfo').hide();
				 		$('#getCodeBtn').removeAttr('disabled');
						$('#getCodeBtn').css({color:'#fff'});
						if($(this).val().trim().substr(0,1)!="1"){
							isMobile=false;
							Login.goLogin();
							$("#getCodeBtn").hide();
							$("#setCode").css("width","100%").attr("placeholder","请输入密码");							
						}else{
							isMobile=true;
							$("#getCodeBtn").show();
							$("#setCode").css("width","60%").attr("placeholder","请输入验证码");		
							
						}
					}).blur(function(){
				    	var thisval=$(this).val();
				    	
				    	if(thisval==""){
				    		$('#getCodeBtn').attr('disabled',true).css({color:'#d2d2d2'});
				    		$(this).val($(this).val().replace(/-/g, ''));
				    		$('#iphoneNumInfo').show().html('<span>请输入手机号/用户名</span>');
				    		$(this).parents(".form-group").removeClass("has-success").addClass("has-error");
				    		$(this).focus();
				    		return false;
				    	}else{
				    		 $(this).parents(".form-group").removeClass("has-error").addClass("has-success"); 
				    	}
					});	
					Login.getMobile();
				},
			  	//判断手机号是否注册[失去焦点时判断]
			  	getMobile:function(){
			  		
			  		$('#getCodeBtn').on('click',function(){
			  			var phone=$("#iphoneNum").val();
			  			if(isMobile&&!checkPhone(phone)){
			  				$('#iphoneNumInfo').show().html('<span>请输入正确的手机号</span>');
			  				$("#iphoneNum").focus();
			  				return false;
			  			}
			  			$.ajax({
			  				type:'get',
			  				async:false,
			  				url:App.getContextPath()+'admin/userIsExist.do?',
			  				data:{username:phone},
			  				dataType:'json',
			  				success:function(result){
			  					if(result.extra==false){
			  						popWindow("用户不存在");
			  						$('iphoneNum').focus();
			  					}else if(result.extra==true&&isMobile){
			  						$.ajax({
						  				type:'get',
						  				async:false,
						  				url:App.getContextPath()+'admin/sendValidateCode.do',
						  				data:{username:phone},
                						dataType:'json',
						  				success:function(result){
						  					if(result.type=='success'){
						  						popWindow(result.content);
						  						$('#iphoneNumInfo').hide();
						  						//倒计时
			                    				timeDown('getCodeBtn',CONFIRG.codeTime);
			                    				$('#setCode').focus();
						  					}else{
						  						popWindow(result.content);
						  					}
						  				}
						  			});
			  					}
			  					Login.goLogin();
			  				},
			  				error:function(){
			  					popWindow('系统繁忙，请稍后再试…');
			  				}
			  			})
			  			
			  		})
			  	},
			  	//登录按钮
			  	goLogin:function(){
			  		
			  		$('#setCode').keyup(function(){
				        $('.btn-danger').css({color:'#fff'});
				    }).blur(function(){
				    	
				    	var _thisval=$(this).val();
				        if(_thisval==""){
				        	$('.btn-danger').css({color:'#f8cfd4'});
				        	$(this).val($(this).val().replace(/-/g, ''));
				        	$('#setCodeInfo').show().html('<span>请输入验证码</span>');
				    		$(this).parents(".form-group").removeClass("has-success").addClass("has-error");
				    		$(this).focus();
				    		$("button").attr("disable",true);
							return false;
				    	}else{
				    		$("#setCode").next("div").attr("status","");
				     		$(this).parents(".form-group").removeClass("has-error").addClass("has-success"); 
				     		$('#setCodeInfo').hide();
				    	}
				    });

					$('.btn-danger').off('click').on('click',function(){
						
					   	if(!hasRegist)return;
					   	var phoneVal=$("#iphoneNum").val();
	        			var codeVal=$("#setCode").val();
	        			
	        			if(isMobile){
	        			//input框没输入完时，注册按钮不可以点击
	        			if(chkinputisnull())return;
	        			//验证手机号码
				        if(!checkPhone(phoneVal)){
				        	$('#iphoneNumInfo').show().html('<span>手机号码格式不正确！</span>');
				        	$('#iphoneNum').focus();
				          return false;
				        }
				        //验证码
				        if(codeVal<6){
				        	$('#setCodeInfo').show().html('<span>请输入正确的验证码</span>');
				          	$('#setCode').focus();
				          	return false;
				        }
	        			}else{
	        				if($('#iphoneNum').val().trim()==''){
	        					$('#iphoneNumInfo').show().html('<span>请输入手机号/用户名！</span>');
					        	$('#iphoneNum').focus();
					          return false;
	        				}
	        				if($('#setCode').val().trim()==''){
	        					$('#setCodeInfo').show().html('<span>请输入正确的密码！</span>');
					        	$('#setCode').focus();
					            return false;
	        				}
	        			}
	        			var url=App.getContextPath()+'admin/validateCodeLogin.do';
	        			if(!isMobile)url=App.getContextPath()+'admin/login.do';
				        $.ajax({
				        	type:'post',
				        	async:false,
				        	url:url,
				        	data:{username:phoneVal,password:codeVal,validateCode:codeVal},
				        	dataType:'json',
				        	success:function(result){
				        		if(result.extra=='VALIDATE_CODE_NO_MATCHING'){
				        			$('#setCodeInfo').show().html(result.content);
				        		}else if(result.extra.key=='UNKNOWN_ACCOUNT'){	
				        			popWindow(result.extra.val);
				        		}else if(result.type=='success'){
				        			if(result.extra.user){
				        			$.cookie("loginName",result.extra.user.userName,{path:'/'});
				        			window.location.href="index.html";
				        			}
				        		}
				        	}
				        })
					}) 
			  	}	
			};
			Login.init();
		});
		//定义变量
		var msgId="msg";
		//检查input框是否存在没有输入情况,只要任何一个input值存在空就返回true,否则返回false
		function chkinputisnull(){
		  var result=false;
		  var psVal='SHUDAD123123';
		  var phoneVal=$("#iphoneNum").val();
		  var codeVal=$("#setCode").val();
		  var psToVal=$("#setPassTo").val();
		  if(phoneVal=="" || codeVal=="" || psVal=="" || psToVal==""){result = true;}
		  alert(3)
		  return result;
		}
		//注册页面手机获取验证码倒计时的变量名
		var CONFIRG={
		  msgShowTime:2000,    //提示信息显示时长
		  msgOutSpeed:'fast',  //提示信息的隐藏动画
		  codeTime:59          //验证码的倒计时时间
		}
		//验证码倒计时
		function timeDown(id,time){
		  var obj=$("#"+id);
		  obj.html(time+'秒后重新发送');  
		  obj.prop("disabled",true);
		  var timer=setInterval(function(){
		    time--;
		    obj.html(time+'秒后重新发送');
		    if(time==0){
		      obj.html('获取验证码');
		      obj.prop("disabled",false);
		      clearInterval(timer);
		    }
		  },1000);
		}
		//提示消息框
		function msgContent(id,msg){
		    $("#"+id).text(msg).show().delay(CONFIRG.msgShowTime).fadeOut(CONFIRG.msgOutSpeed);
		}

		/**
		* 验证手机号码格式是否正确
		* phone ：手机号
		* return: true 正确格式的手机号;false 错误格式的手机号
		*/
		function checkPhone(phone){
		    if(!phone){//为空
		      return false;
		    }else if(phone.length!=11){
		      return false;
		    }
		    return phone.match(/^(13|14|15|16|17|18|19)\d{9}$/);

		}
		/**
		* 验证密码6-15位数字+字母
		* pwd :密码
		* return: true 正确格式的密码;false 错误格式的密码
		*/
		function checkPwd(pwd){
		    if(!pwd){
		      return false;
		    }
		    return pwd.match(/^[0-9A-Za-z]{6,15}$/);

		}

		/**
		* 判断字符串是否为空，传一个参数验证str是否为空，传2个参数同时验证是否等于默认值
		* str ：字符串
		* defaultVal ：默认值
		* return: true 传入的字符串为空;false 传入的字符串不为空
		*/
		function isNull(str,defaultVal){

		    if(!str || str=='' || str=='undefined' ){
		      return true;
		    }
		    if(arguments.length==2){//当传入了2个参数的时候
		      if(str == defaultVal){
		        return true;
		      }
		    }
		    return false; 
		}

		//弹窗方法
		function popWindow(msg,fn){
			var str="";
			str+='<div class="popWindow yg-login-layer" id="popWindow">';
			str+='</div>';
			str+='<p class="yg-login-hint" id="msg">';
			str+=msg;
			str+='</p>';
			var popLayer = document.createElement("div");
			popLayer.id = "popLayer";
			popLayer.innerHTML = str;
			document.body.appendChild(popLayer);
			popLayer.onclick = function()
			{
				document.body.removeChild(popLayer);
				if(fn){fn()};
			}
			window.setTimeout(function(){$("#popLayer").remove()},2000);
		}
	</script>
	<!-- /JAVASCRIPTS -->
</body>
</html>